<template>
    <BaseComposite :config="config" :refreshEditor="refreshEditor" @updateData="updateData">
        <el-link href="https://gitee.com/renlin901017/rl-plus-docs/blob/master/docs/BaseTable.md" target="_blank" type="primary">更多用法请参考文档</el-link>
        <!-- 基础用法 -->
        <BaseItem label="基础用法" :text="BaseHtml+BaseScript">
            <BaseTable :config="BaseConfig"></BaseTable>
        </BaseItem>
        <!-- index用法 -->
        <BaseItem label="下标用法" :text="IndexHtml+IndexScript">
            <BaseTable :config="IndexConfig"></BaseTable>
        </BaseItem>
        <!-- selection用法 -->
        <BaseItem label="selection用法" :text="SelectionHtml+SelectionScript">
            <!-- {{SelectionConfig.selectList}} -->
            <!-- 方法一 -->
            <!-- <BaseTable :config="SelectionConfig" v-model:selectList="SelectionConfig.selectList"></BaseTable> -->
            <!-- 方法二 -->
            <BaseTable :config="SelectionConfig" @update:selectList="selectionChange"></BaseTable>
        </BaseItem>
        <!-- Radio用法 -->
        <BaseItem label="raio用法" :text="RadioHtml+RadioScript">
            <!-- {{RadioConfig.radioData}} -->
            <!-- 方法一 -->
            <BaseTable :config="RadioConfig" v-model:radioData="RadioConfig.radioData" />
            <!-- 方法二 -->
            <!-- <BaseTable :config="RadioConfig" @update:radioData="radioChange" />` -->
        </BaseItem>
        <!-- checkbox用法 -->
        <BaseItem label="checkbox用法" :text="CheckboxHtml+CheckboxScript">
            <!-- {{CheckboxConfig}} -->
            <!-- 方法一 -->
            <BaseTable :config="CheckboxConfig" v-model:selectList="CheckboxConfig.selectList" />
            <!-- 方法二 -->
            <!-- <BaseTable :config="CheckboxConfig" @update:selectList="checkboxChange" />` -->
        </BaseItem>
        <!-- 操作区用法 -->
        <BaseItem label="操作区用法" :text="OperHtml+OperScript">
            <BaseTable :config="OperConfig" @btnClick="btnClick"></BaseTable>
        </BaseItem>
        <!-- filter用法 -->
        <BaseItem label="filter用法" :text="FilterHtml+FilterScript">
            <BaseTable :config="FilterConfig"></BaseTable>
        </BaseItem>
        <!-- slot+expand用法 -->
        <BaseItem label="slot+expand用法" :text="SlotAndExpandHtml+SlotAndExpandScript">
            <BaseTable :config="SlotAndExpandConfig">
                <template #expand="{row,index}">
                    {{row}}-{{index}}
                </template>
                <template #sex="{row,index}">
                    {{row.sex}}-{{index}}
                </template>
            </BaseTable>
        </BaseItem>
        <!-- 其他用法 -->
        <BaseItem label="其他用法" :text="OtherScript">
            <BaseTable :config="OtherConfig"></BaseTable>
        </BaseItem>
        <!-- 自定义设置 -->
        <div class="item">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="点击可复制"
                placement="top-start"
            >
                <p class="custom" @click="copyText(JsonToString(config))">自定义设置</p>     
            </el-tooltip>
            <BaseTable :key="config" :config="config"></BaseTable>
        </div>        
        <template #props>
            <BaseForm :config="formConfig" :key="formConfig" ref="myForm">                
                <div class="btns">                    
                    <el-button type="primary" @click="useConfig" :auto-insert-space="true">应用</el-button>
                    <el-button @click="reset" :auto-insert-space="true">重置</el-button>
                </div>
            </BaseForm>         
        </template>
    </BaseComposite>
</template>
<script lang="ts" setup>
import { ref, isRef, reactive,nextTick } from 'vue';
import BaseComposite from '@/components/BaseComposite';
import BaseItem from '@/components/BaseItem';
import { ElButton, ElTooltip, ElLink} from "element-plus";
import dictJson from '@/assets/json';
import { BaseTable, BaseTableType, BaseForm, BaseFormType, BaseFormItemEleType, GroupComsType, InputValue, TableItemType, BtnType, BaseSelect } from 'rl-plus';
import { deepClone, JsonToString } from 'rl-utils';
import { copyText } from '../../utils/index';
// 数据源
const data = [
    {id:1,grade:"一年级",class:1,name:"tom1",sex:1},
    {id:2,grade:"一年级",class:2,name:"tom2",sex:2},
    {id:3,grade:"一年级",class:3,name:"tom3",sex:0},
    {id:4,grade:"二年级",class:1,name:"alisa1",sex:1},
    {id:5,grade:"二年级",class:2,name:"alisa2",sex:2},
    {id:6,grade:"二年级",class:3,name:"alisa3",sex:0},
]
// #region 基础用法
const BaseHtml = `<BaseTable :config="config"/>`
const BaseScript = `
import { reactive} from 'vue';
import { BaseCheckbox, BaseCheckboxType} from 'rl-plus';
const config = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: [
        {grade:"一年级",class:1,name:"tom1",sex:1},
        {grade:"一年级",class:2,name:"tom2",sex:2},
        {grade:"一年级",class:3,name:"tom3",sex:0},
        {grade:"二年级",class:1,name:"alisa1",sex:1},
        {grade:"二年级",class:2,name:"alisa2",sex:2},
        {grade:"二年级",class:3,name:"alisa3",sex:0},
    ],
    config: [
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {label:'性别',prop:'sex'},
    ]
})
`
const BaseConfig = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {label:'性别',prop:'sex'},
    ]
})
// #endregion
// #region Index用法
const IndexHtml = `<BaseTable :config="config"/>`
const IndexScript = `
import { reactive} from 'vue';
import { BaseCheckbox, BaseCheckboxType} from 'rl-plus';
const config = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: [
        {grade:"一年级",class:1,name:"tom1",sex:1},
        {grade:"一年级",class:2,name:"tom2",sex:2},
        {grade:"一年级",class:3,name:"tom3",sex:0},
        {grade:"二年级",class:1,name:"alisa1",sex:1},
        {grade:"二年级",class:2,name:"alisa2",sex:2},
        {grade:"二年级",class:3,name:"alisa3",sex:0},
    ],
    config: [
        {label:'下标',prop:'',type:TableItemType.INDEX},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ]
})
`
const IndexConfig = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:'下标',prop:'',type:TableItemType.INDEX},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ]
})
const newData = reactive([])
// #endregion

//#region Selection用法
const SelectionHtml = `
<!-- 方法一 -->
<BaseTable :config="config" v-model:selectList="config.selectList" />
<!-- 方法二 -->
<BaseTable :config="config" @update:selectList="selectionChange" />`
const SelectionScript = `
import { reactive} from 'vue';
import { BaseTable, BaseTableType,TableItemType} from 'rl-plus';
const config = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: [
        {id:1,grade:"一年级",class:1,name:"tom1",sex:1},
        {id:2,grade:"一年级",class:2,name:"tom2",sex:2},
        {id:3,grade:"一年级",class:3,name:"tom3",sex:0},
        {id:4,grade:"二年级",class:1,name:"alisa1",sex:1},
        {id:5,grade:"二年级",class:2,name:"alisa2",sex:2},
        {id:6,grade:"二年级",class:3,name:"alisa3",sex:0},
    ],
    config: [
        {label:"",prop:"",type:TableItemType.SELECTION},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ],
    selectList: [
        {id:3,grade:"一年级",class:3,name:"tom3",sex:0},
        {id:4,grade:"二年级",class:1,name:"alisa1",sex:1},
    ]
})
const selectionChange = (e) => { 
    SelectionConfig.selectList=e
}
`
const SelectionConfig = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:"",prop:"",type:TableItemType.SELECTION},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ],
    selectList: [
        {id:3,grade:"一年级",class:3,name:"tom3",sex:0},
        {id:4,grade:"二年级",class:1,name:"alisa1",sex:1},
    ]
})
const selectionChange = (e) => { 
    SelectionConfig.selectList=e
}
// #endregion

// #region Radio用法
const RadioHtml = `
    <!-- 方法一 -->
    <BaseTable :config="config" v-model:value="config.radioData" />
    <!-- 方法二 -->
    <BaseTable :config="config" @update:radioData="radioChange" />`
const RadioScript = `
import { reactive} from 'vue';
import { BaseTable, BaseTableType,TableItemType} from 'rl-plus';
const config = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:"单选",prop:' ',type:TableItemType.RADIO},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ],
    radioData:2
})
const radioChange = (e) => { 
    config.radioData=e
}
`
const RadioConfig = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:"单选",prop:'id',type:TableItemType.RADIO},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ],
    radioData:2
})
const radioChange = (e) => { 
    RadioConfig.radioData=e
}
// #endregion

// #region checkbox用法
const CheckboxHtml = `
<!-- 方法一 -->
<BaseTable :config="config" v-model:selectList="config.selectList" />
<!-- 方法二 -->
<BaseTable :config="config" @update:selectList="checkboxChange" />`
const CheckboxScript = `
import { reactive} from 'vue';
import { BaseTable, BaseTableType,TableItemType} from 'rl-plus';
const config = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:"单选",prop:'id',type:TableItemType.CHECKBOX},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ],
    selectList: [
        {id:5,grade:"二年级",class:2,name:"alisa2",sex:2},
        {id:6,grade:"二年级",class:3,name:"alisa3",sex:0},
    ]
})
const checkboxChange = (e) => { 
    CheckboxConfig.selectList=e
}
`
const CheckboxConfig = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:"单选",prop:'checkbox',type:TableItemType.CHECKBOX},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ],
    selectList: [
        {id:5,grade:"二年级",class:2,name:"alisa2",sex:2},
        {id:6,grade:"二年级",class:3,name:"alisa3",sex:0},
    ]
})
const checkboxChange = (e) => { 
    CheckboxConfig.selectList=e
}
// #endregion

// #region 操作区用法
const OperHtml = `<BaseTable :config="BaseConfig"/>`
const OperScript = `
import { reactive} from 'vue';
import { BaseTable, BaseTableType,TableItemType} from 'rl-plus';
const config = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: [
        {grade:"一年级",class:1,name:"tom1",sex:1},
        {grade:"一年级",class:2,name:"tom2",sex:2},
        {grade:"一年级",class:3,name:"tom3",sex:0},
        {grade:"二年级",class:1,name:"alisa1",sex:1},
        {grade:"二年级",class:2,name:"alisa2",sex:2},
        {grade:"二年级",class:3,name:"alisa3",sex:0},
    ],
    config: [
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
        {
            label: '操作', prop: '',width:150, type: TableItemType.OPERATIONS, data: [
                { name: '新增', text:true,type: BtnType.PRIMARY,class:'oper-btn',style:'padding:0' },
                { name: '修改', text:true,type: BtnType.SUCCESS,class:'oper-btn',style:'padding:0' },
                { name: '删除', text:true,type: BtnType.DANGER,class:'oper-btn',style:'padding:0' },
            ]
        }
    ]
})
const btnClick = (e) => { 
    console.log(e)
}
`
const OperConfig = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
        {
            label: '操作', prop: '',width:150, type: TableItemType.OPERATIONS, data: [
                { name: '新增', text:true,type: BtnType.PRIMARY,class:'oper-btn',style:'padding:0' },
                { name: '修改', text:true,type: BtnType.SUCCESS,class:'oper-btn',style:'padding:0' },
                { name: '删除', text:true,type: BtnType.DANGER,class:'oper-btn',style:'padding:0' },
            ]
        }
    ]
})
const btnClick = (e) => { 
    console.log(e)
}
// #endregion

// #region filter用法
const FilterHtml = `<BaseTable :config="BaseConfig"/>`
const FilterScript = `
import { reactive} from 'vue';
import { BaseCheckbox, BaseCheckboxType} from 'rl-plus';
const config = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: [
        {grade:"一年级",class:1,name:"tom1",sex:1},
        {grade:"一年级",class:2,name:"tom2",sex:2},
        {grade:"一年级",class:3,name:"tom3",sex:0},
        {grade:"二年级",class:1,name:"alisa1",sex:1},
        {grade:"二年级",class:2,name:"alisa2",sex:2},
        {grade:"二年级",class:3,name:"alisa3",sex:0},
    ],
    config: [
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ]
})
`
const FilterConfig = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {
            label: '性别', prop: 'sex',
            type: TableItemType.CUSTOMFN, customFn(e) { 
                if (e.$index > -1) { 
                    return e.row.sex === 0 ?'未知':e.row.sex === 1 ?'男生':'女生'
                }
            }
        },
    ]
})
// #endregion

// #region slot+expand用法
const SlotAndExpandHtml = `<BaseTable :config="config">
    <template #expand="{row,index}">
        {{row}}-{{index}}
    </template>
    <template #sex="{row,index}">
        {{row}}-{{index}}
    </template>
</BaseTable>`
const SlotAndExpandScript = `
import { reactive} from 'vue';
import { BaseCheckbox, BaseCheckboxType} from 'rl-plus';
const config = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: [
        {grade:"一年级",class:1,name:"tom1",sex:1},
        {grade:"一年级",class:2,name:"tom2",sex:2},
        {grade:"一年级",class:3,name:"tom3",sex:0},
        {grade:"二年级",class:1,name:"alisa1",sex:1},
        {grade:"二年级",class:2,name:"alisa2",sex:2},
        {grade:"二年级",class:3,name:"alisa3",sex:0},
    ],
    config: [
        {label:'expand',prop:'',type:TableItemType.EXPAND,slot:'expand'},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {label: '性别', prop: 'sex',type:TableItemType.SLOT,slot:"sex"},
    ]
})
`
const SlotAndExpandConfig = reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:'expand',prop:'',type:TableItemType.EXPAND,slot:'expand'},
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {label: '性别', prop: 'sex',type:TableItemType.SLOT,slot:"sex"},
    ]
})
// #endregion

// #region 其他用法
const OtherHtml = `<BaseTable :config="config"/>`
const OtherScript = `
import { reactive} from 'vue';
import { BaseCheckbox, BaseCheckboxType} from 'rl-plus';
const config = reactive<BaseCheckboxType>({
    value: [],
    class:"item-custom",
    style:"padding:10px;background:#f5f5f5",
    min: 1,
    max: 3,
    buttonType:true,
    data: [
        {
            label: "一年级",
            value: "1",
            disabled:true
        },{
            label: "二年级",
            value: "2",
        },{
            label: "三年级",
            value: "3",
        },{
            label: "四年级",
            value: "4",
        },{
            label: "五年级",
            value: "5",
        },{
            label: "六年级",
            value: "6",            
        }
    ]
})
`
const OtherConfig=reactive<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,    
    config: [
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class',sortable:true},
        {label:'姓名',prop:'name',class: "item-custom",style:"color:blue"},
        {label:'性别',prop:'sex',style:"color:red",},
    ]
})
// #endregion

// #region初始化
const config = ref<BaseTableType>({
    eleType:GroupComsType.BASETABLE,
    data: data,
    config: [
        {label:'年级',prop:'grade'},
        {label:'班级',prop:'class'},
        {label:'姓名',prop:'name'},
        {label:'性别',prop:'sex'},
    ]
})
// 备份数据
const initData = deepClone(config.value)
// 刷新JsonEditor
const refreshEditor = ref(true)
// form表单
const formConfig = reactive<BaseFormType>({
    eleType: GroupComsType.BASEFORM,
    labelWidth:300,
    config: [{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'height',
            value:null,
            label: '高度',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type: InputValue.INT,
            prop: 'maxHeight',
            value:null,
            label: '最大高度',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'stripe',
            value:true,
            label: '是否为斑马纹',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'border',
            value:true,
            label: '是否带有纵向边框',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'fit',
            value:true,
            label: '列的宽度是否自撑开',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'showHeader',
            value:true,
            label: '是否显示表头',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'highlightCurrentRow',
            value:false,
            label: '是否要高亮当前行',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'currentRowKey',
            value:null,
            label: '当前行的 key'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'emptyText',
            value:null,
            label: '空数据时显示的文本内容'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'defaultExpandAll',
            value:false,
            label: '是否默认展开所有行',
        },{
            eleType: BaseFormItemEleType.BASESELECT,
            prop: 'tooltipEffect',
            value:"dark",
            label: 'tooltip effect 属性',
            data: [
                {label:"dark",value:"dark"},
                {label:"light",value:"light"},
            ]
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'showSummary',
            value:false,
            label: '是否在表尾显示合计行',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'sumText',
            value:'合计',
            label: '合计行第一列的文本'
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'selectOnIndeterminate',
            value:true,
            label: 'select-on-indeterminate',
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            type:InputValue.INT,
            prop: 'indent',
            value:16,
            label: '展示树形数据时，树节点的缩进',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'lazy',
            value:null,
            label: '是否懒加载子节点数据',
        },{
            eleType: BaseFormItemEleType.BASESELECT,
            prop: 'tableLayout',
            value:'fixed',
            label: '设置表格单元、行和列的布局方式',
            data: [
                {label:'fixed',value:"fixed"},
                {label:'auto',value:"auto"},
            ]
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'scrollbarAlwaysOn',
            value:false,
            label: '总是显示滚动条',
        },{
            eleType: BaseFormItemEleType.BASESWITCH,
            prop: 'flexible',
            value:false,
            label: '确保主轴的最小尺寸',
        },
        {
            eleType: BaseFormItemEleType.BASESELECT,
            prop: 'size',
            value:'',
            label: '尺寸',
            data: dictJson.sizes
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'class',
            value:'',
            label: '类'
        },{
            eleType: BaseFormItemEleType.BASEINPUT,
            prop: 'style',
            value:'',
            label: '样式'
        }
    ]
})
const myForm=ref(null)
// 白名单（该属性默认为true）
const propsConfig=['stripe','border','fit','showHeader','selectOnIndeterminate']
const useConfig = () => {
    if (myForm.value) {
        let newData = deepClone(myForm.value.newData)
        const dataKeys = Object.keys(newData)
        dataKeys.map(item => {
            if (!newData[item]&&!propsConfig.includes(item)) { 
                delete newData[item]
            }
        })
        if (Object.keys(newData).length > 0) {
            config.value = {...initData,...newData}
            refreshEditor.value = false
            nextTick(() => {
                refreshEditor.value = true
            })
        } else { 
            reset()
        }
    }
}
const reset = () => { 
    config.value = initData
    refreshEditor.value = false
    nextTick(() => {
        myForm.value.resetForm()
        refreshEditor.value = true
    })
}
// JsonEditor数据同步
const updateData = (e) => { 
    config.value=isRef(e)&&e.value||e
}
// #endregion
</script>
<style lang="scss" scoped>
    @import "../../assets/css/index.scss";
    .tip{
        color: #999;
        text-align: center;
        padding: 10px;
    }
    .btns{
        display: flex;
        justify-content: center;
    }
    .item-custom{padding:10px}
</style>